/**index.wxss**/
page {
  // height: 100vh;
  display: flex;
  background-color: rgb(217, 229, 241);
  flex-direction: column;
  padding: 16rpx;
  box-sizing: border-box;


  >view {
    &:nth-child(n+2) {
      margin-top: 10rpx;
    }

  }
}


.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

.swiper {
  swiper {
    height: 360rpx;
    overflow: hidden;
    border-radius: 10rpx;

    swiper-item {
      image {
        border-radius: 10rpx;
        width: 100%;
        height: 100%;
      }
    }
  }
}

.info {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  .iconfont{
    font-size: 24rpx;
  }

  text {
    font-size: 30rpx;
  }
}

.goods-nav {
  display: flex;
  justify-content: space-between;
  background-color: #dceb5c;
  padding: 20rpx 16rpx;
  border-radius: 10rpx;

  view {
    navigator {
      display: flex;
      flex-direction: column;
      margin: 10rpx;
      align-items: center;

      image {
        height: 80rpx;
        width: 80rpx;
      }

      text {
        font-size: 22rpx;
      }
    }
  }
}

.goods-hot {
  padding: 16rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  .scroll-x {
    width: 100%;
    white-space: nowrap;

    view {
      display: inline-block;
      margin-right: 16rpx;
      .goods-item {
        display: flex;
        flex-direction: column;
        height: 420rpx;
        width: 320rpx;

        image {
          height: 420rpx;
          width: 320rpx;
          overflow: hidden;
          border-radius: 10rpx;
        }
        text {
          font-size: 24rpx;
        }
      }
    }


  }

}

.bg-image{
  height: 400rpx;
  background-image: url(https://media.gettyimages.com/id/1308198363/zh/%E7%85%A7%E7%89%87/blue-sky-over-the-blue-ocean.jpg?s=612x612&w=0&k=20&c=oF29rQRLKDC75Dhwfu6msGZ7W9QxkMJUKy6eOJ4GfJ8=);
}